<template>
  <div>
    <el-form-item
      v-if="activeData.prepend !== undefined"
      label="前缀"
    >
      <el-input
        v-model="activeData.prepend"
        placeholder="请输入前缀"
      />
    </el-form-item>
    <el-form-item
      v-if="activeData.append !== undefined "
      label="后缀"
    >
      <el-input
        v-model="activeData.append"
        placeholder="请输入后缀"
      />
    </el-form-item>
    <el-form-item
      v-if="activeData['prefix-icon'] !== undefined"
      label="前图标"
    >
      <el-input
        v-model="activeData['prefix-icon']"
        placeholder="请输入前图标名称"
      >
        <el-button
          slot="append"
          icon="el-icon-thumb"
          @click="openIconsDialog('prefix-icon')"
        >
          选择
        </el-button>
      </el-input>
    </el-form-item>
    <el-form-item
      v-if="activeData['suffix-icon'] !== undefined"
      label="后图标"
    >
      <el-input
        v-model="activeData['suffix-icon']"
        placeholder="请输入后图标名称"
      >
        <el-button
          slot="append"
          icon="el-icon-thumb"
          @click="openIconsDialog('suffix-icon')"
        >
          选择
        </el-button>
      </el-input>
    </el-form-item>
    <el-form-item
      v-if="activeData.autosize !== undefined"
      label="最小行数"
    >
      <el-input-number
        v-model="activeData.autosize.minRows"
        :min="1"
        placeholder="最小行数"
      />
    </el-form-item>
    <el-form-item
      v-if="activeData.autosize !== undefined"
      label="最大行数"
    >
      <el-input-number
        v-model="activeData.autosize.maxRows"
        :min="1"
        placeholder="最大行数"
      />
    </el-form-item>
    <el-form-item
      v-if="activeData.minlength !== undefined"
      label="最少输入"
    >
      <el-input
        v-model="activeData.minlength"
        placeholder="请输入字符长度"
      >
        <template slot="append">
          个字符
        </template>
      </el-input>
    </el-form-item>
    <el-form-item
      v-if="activeData.minlength !== undefined"
      label="最多输入"
    >
      <el-input
        v-model="activeData.maxlength"
        placeholder="请输入字符长度"
      >
        <template slot="append">
          个字符
        </template>
      </el-input>
    </el-form-item>
    <el-form-item
      v-if="activeData['show-word-limit'] !== undefined"
      label="输入统计"
    >
       <span slot="label">
        输入统计
        <el-tooltip class="item" content="在设置最少最多输入之后显示字数" effect="dark" placement="top-start">
          <i class="el-icon-warning" />
        </el-tooltip>
      </span>
      <el-switch v-model="activeData['show-word-limit']" />
    </el-form-item>
    <el-form-item
      v-if="activeData.notRepeat !== undefined"
    >
      <span slot="label">
        不可重复
        <el-tooltip class="item" content="开启后该字段值不允许重复值，提交时重复将无法提交" effect="dark" placement="top-start">
          <i class="el-icon-warning" />
        </el-tooltip>
      </span>
      <el-switch v-model="activeData.notRepeat" />
    </el-form-item>
    <div
      v-if="activeData.config.dataType"
      class="reg-item"
    >
      <el-form-item v-if="activeData.config.dataType" label="反馈类型">
        <el-select v-model="activeData.config.dataType.type" size="mini" @change="dataTypeChange">
          <el-option v-for="option in dataTypeList" :key="option.value" :value="option.value" :label="option.label" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="activeData.config.dataType.type" label="错误提示" style="margin-bottom: 0">
        <el-input v-model="activeData.config.dataType.message" placeholder="请输入错误提示" />
      </el-form-item>
    </div>
    <icons-dialog
      :current="activeData[currentIconModel]"
      :visible.sync="iconsVisible"
      @select="setIcon"
    />
  </div>
</template>

<script>
import IconsDialog from '../IconsDialog'

export default {
  name: 'ConfigItemInput',
  components: {
    IconsDialog
  },
  props: ['activeData'],
  data() {
    return {
      dataTypeList: [
        {
          value: null,
          label: '无校验'
        },
        {
          value: 'string',
          label: '字符串'
        }, {
          value: 'number',
          label: '数字'
        }, {
          value: 'integer',
          label: '整数'
        }, {
          value: 'float',
          label: '小数'
        }, {
          value: 'url',
          label: 'URL地址'
        }, {
          value: 'email',
          label: '邮箱地址'
        }, {
          value: 'phone',
          label: '手机号'
        }, {
          value: 'identity',
          label: '身份证号'
        }, {
          value: 'hex',
          label: '十六进制'
        }, {
          value: 'zh',
          label: '中文、数字、标点'
        }, {
          value: 'zh2',
          label: '中文'
        }
      ],
      iconsVisible: false,
      currentIconModel: null
    }
  },
  methods: {
    dataTypeChange(value) {
      this.activeData.config.dataType.message = `请输入正确的${this.dataTypeList.find(item => item.value === value).label}`
    },
    openIconsDialog(model) {
      this.iconsVisible = true
      this.currentIconModel = model
    },
    setIcon(val) {
      this.activeData[this.currentIconModel] = val
    }
  }
}
</script>

<style scoped>

</style>
